<template>
    <div class="hello">
      <span id="fa" class="iconfont icon-fork" @click="cha">×</span>
      <h2>密码登录</h2>
      <!-- 密码登录 -->
      <div class="login">
        <input type="text" placeholder="手机/用户名" v-model="params.phone"  :rules="[{required:true,pattern:/^1[3-9]\d{9}$/}]"/>
        <input type="password" placeholder="密码"  v-model="params.pass" :rules="[{required:true,pattern: /^\d{4}$/}]">
        <button @click="oncles">登录</button>
      </div>
      <!-- 手机号登录 -->
      <div class="agin">
        <a href="">手机号登录</a>
        <router-link  to="/Tuan">忘记密码</router-link>
      </div>
      <!-- 阅读协议 -->
      <div class="inpt">
        <input type="checkbox" />已阅读并同意
        <a href="">《用户服务协议》、</a>
        <a href="">《隐私政策》</a>
      </div>
    </div>
  </template>
  
  <script>
import { user_login } from '@/utils/api';
import { Toast } from 'vant';

  export default {
    name: "HelloWorld",
  data() {
    return {
      params: { 
        phone: "",
        pass:"",
      },
    }
  },
  methods: {
    cha() {
        this.$router.go(-1)
    },
    oncles() {
      user_login(this.params).then((res) => {
        console.log(res.data);
        if (res.data.status == 200) {
          Toast.fail("登录成功!")
          // 保存用户信息
          localStorage.setItem("token", res.data.token)
          localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo))
        } else {
        Toast.fail("登录失败!")
      }
    })
      }
  },
  // mounted() {
    
  // }
  };
  </script>
  
  <style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  #fa {
    margin: 10px 15px;
    font-size: 40px;
  }
  h2 {
    margin: 60px 15px;
    font-size: 35px;
  }
  .login input {
    display: block;
    height: 40px;
    width: 90%;
    margin: 10px auto;
    padding: 10px 10px;
    border-radius: 20px;
    border: 1px solid rgb(255, 255, 255);
    line-height: 20px;
  }
  .login button {
    display: block;
    width: 90%;
    margin-top: 60px;
    margin-left: 20px;
    padding: 20px 10px;
    border-radius: 20px;
    border: 1px solid rgb(255, 255, 255);
  }
  a {
    text-decoration: none;
    color: rgb(0, 135, 252);
  }
  .agin {
    display: block;
    display: flex;
    width: 90%;
    margin: 10px auto;
    justify-content: space-between;
    /* color: rgb(0, 131, 245); */
  }
  .inpt {
    width: 90%;
    /* position: fixed; */
    margin: 150px 20px;
  }
  .inpt input {
    border-radius: 50%;
  }
  </style>
  